<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>客户管理 / 人员组管理-新增部门</title>
  <link rel="stylesheet" href="../../../css/layui.css" media="all">
  <link rel="stylesheet" type="text/css" href="../../../css/common-layer.css"/>
  <link rel="stylesheet" type="text/css" href="../../../zTree/zTreeStyle/zTreeStyle.css"/>
  <style>
  	.layui-form-item{margin-bottom: 10px;}
  	.layui-form-select dl{max-height: 187px;}
  	label{width: 175px !important;}
	.layui-form-item .layui-input-inline{width: 250px !important;}
  	#search-tree,#search2-tree{width: 424px;height: 280px;background: #F6F6F6;position: absolute;top: 38px;left: 0;z-index: 9999;overflow: auto;display: none;}
  </style>
</head>
<body style="background: #fff;overflow-x:hidden ;" class="innerBody">
<form class="layui-form layui-form-pane" action="" id="formHtml" style="margin-top: 20px; margin-left: 10px;" lay-filter="updForm">
	<div class="layui-container" style="width: auto; height: 350px;">  
	  <div class="layui-row">
	    <div class="layui-col-xs7" style="border-right: 1px solid #e8e8e8; padding-right: 15px;  height: 350px;">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			    <legend>人员组信息</legend>
			  </fieldset>
			<div class="layui-form-item"  style="position: relative;">
			  <div class="layui-inline">
			    <label class="layui-form-label">人员组名称</label>
			    <div class="layui-input-inline" id="search-btn">
			      <input type="text" name="sj" lay-verify="required" autocomplete="off" class="layui-input sjbm"  value="" placeholder="请选择" style="background: #E2E2E2;cursor: pointer;">
			    </div> 
			    <div id="search-tree">
			      	<ul id="treeDemo" class="ztree"></ul>
			      </div>
			  </div>
			</div>
	      	<div class="layui-form-item">
	          <div class="layui-inline">
	              <label class="layui-form-label">起止时间</label>
	              <div class="layui-input-inline">
	                  <input name="date" class="layui-input"  type="text" placeholder="请选择时间" autocomplete="off" id="date" lay-verify="required">
	              </div>
	          </div>
	      	</div>
	      	<div class="layui-form-item">
	          <div class="layui-inline">
	              <label class="layui-form-label">用户计划</label>
	              <div class="layui-input-inline">
	                  <input name="jh" class="layui-input" type="text" placeholder="请输入" autocomplete="off">
	              </div>
	          </div>
	      	</div>
	      
	        
	      
	    </div>
	    <div class="layui-col-xs5" style=" height: 350px;">
	      <div class="layui-tab" style="padding-left: 15px;">
	        <ul class="layui-tab-title">
	          <li class="layui-this">区域</li>
	          <li>门禁组</li>
	        </ul>
	        <div class="layui-tab-content" style="height:280px; overflow-y: auto;">
	          <div class="layui-tab-item layui-show">
				  <ul id="treeDemo2" class="ztree"></ul>
			  </div>
	          <div class="layui-tab-item">
				  <ul id="treeDemo3" class="ztree"></ul>
			  </div>
	        </div>
	      </div>
	    </div>
	  </div>
	 </div>
	<div class="layui-form-item  window-block-btn">
	  <div class="layui-input-block">
		<button type="button" class="layui-btn layui-btn-primary window-btn" id="canleBtn">取消</button>
		<button type="button" class="layui-btn window-btn" lay-submit="" lay-filter="confirmBtn">提交</button>
	  </div>
	</div>
</form>
</body>

<script src="../../../layui.all.js"></script>
<script src="../../../js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="../../../zTree/jquery.ztree.all.js" type="text/javascript"></script>
<script src="../../../zTree/jquery.ztree.exhide-3.5.min.js" type="text/javascript"></script>
<script src="../../../zTree/MtrSearchZTree.js" type="text/javascript"></script>
<script type="text/javascript">
	var setting = {
		view: {
			addHoverDom: addHoverDom,//显示操作图标
			removeHoverDom: removeHoverDom,//移除图标
			selectedMulti: false
		  },
		 data: {
			 simpleData: {
				 enable: true
			 }
		 },
		 callback: {
			 onRename: zTreeOnRename,//修改
			 onRemove: zTreeOnRemove,//删除
			 onClick: zTreeOnClickRight,
			 beforeEditName: beforeEditName,
			 beforeRemove: beforeRemove,
			 beforeRename: beforeRename,
			 onDblClick: myOnDblClick
 
		 },
		 edit: {
			 enable: true,
			 showRemoveBtn: true,
			 showRenameBtn: true,
			 removeTitle: "删除",
			 renameTitle: "修改"
		 }
	};
	var setting2 = {
		check: {
			enable: true
		},
		view: {
			addHoverDom: addHoverDom,//显示操作图标
			removeHoverDom: removeHoverDom,//移除图标
			selectedMulti: false
		  },
		 data: {
			 simpleData: {
				 enable: true
			 }
		 },
		 callback: {
			 onRename: zTreeOnRename,//修改
			 onRemove: zTreeOnRemove,//删除
			 onClick: zTreeOnClickRight,
			 beforeEditName: beforeEditName,
			 beforeRemove: beforeRemove,
			 beforeRename: beforeRename,
			 onDblClick: myOnDblClick
	 
		 },
		 edit: {
			 enable: true,
			 showRemoveBtn: true,
			 showRenameBtn: true,
			 removeTitle: "删除",
			 renameTitle: "修改"
		 }
	};
		
		var zNodes =[
			{ name:"合肥一中", open:true,
				children: [
					{ name:"主校区",open:true,
						children: [
							{ name:"C层级菜单1"},
							{ name:"C层级菜单2"},
							{ name:"C层级菜单3"},
						]},
					{ name:"二级校区",
						children: [
							{ name:"C层级菜单1"},
							{ name:"C层级菜单2"},
							{ name:"C层级菜单3"},
						]},
					{ name:"三级校区",
						children: [
							{ name:"C层级菜单1"},
							{ name:"C层级菜单2"},
							{ name:"C层级菜单3"},
						]}
				]},
				{ name:"合肥二中",
					children: [
						{ name:"主校区",
							children: [
								{ name:"C层级菜单1"},
								{ name:"C层级菜单2"},
								{ name:"C层级菜单3"},
							]},
						{ name:"二级校区",
							children: [
								{ name:"C层级菜单1"},
								{ name:"C层级菜单2"},
								{ name:"C层级菜单3"},
							]},
						{ name:"三级校区",
							children: [
								{ name:"C层级菜单1"},
								{ name:"C层级菜单2"},
								{ name:"C层级菜单3"},
							]}
				]},
				{ name:"合肥三中",
					children: [
						{ name:"主校区",
							children: [
								{ name:"C层级菜单1"},
								{ name:"C层级菜单2"},
								{ name:"C层级菜单3"},
							]},
						{ name:"二级校区",
							children: [
								{ name:"C层级菜单1"},
								{ name:"C层级菜单2"},
								{ name:"C层级菜单3"},
							]},
						{ name:"三级校区",
							children: [
								{ name:"C层级菜单1"},
								{ name:"C层级菜单2"},
								{ name:"C层级菜单3"},
							]}
				]},
				{ name:"合肥四中",
					children: [
						{ name:"主校区",
							children: [
								{ name:"C层级菜单1"},
								{ name:"C层级菜单2"},
								{ name:"C层级菜单3"},
							]},
						{ name:"二级校区",
							children: [
								{ name:"C层级菜单1"},
								{ name:"C层级菜单2"},
								{ name:"C层级菜单3"},
							]},
						{ name:"三级校区",
							children: [
								{ name:"C层级菜单1"},
								{ name:"C层级菜单2"},
								{ name:"C层级菜单3"},
							]}
					]},
		];
		
		var log, className = "dark";
		var newCount = 1;
		function addHoverDom(treeId, treeNode) {
			var sObj = $("#" + treeNode.tId + "_span");
			if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
			var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
				+ "' title='add node' onfocus='this.blur();'></span>";
			sObj.after(addStr);
			var btn = $("#addBtn_"+treeNode.tId);
			if (btn) btn.bind("click", function(){
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
				return false;
			});
		};
		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_"+treeNode.tId).unbind().remove();
		};
		function zTreeOnRename(e, treeId, treeNode, isCancel) {
			showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" onRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>":""));
		}
		function zTreeOnRemove(e, treeId, treeNode) {
			showLog("[ "+getTime()+" onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
		}
		function showLog(str) {
			if (!log) log = $("#log");
			log.append("<li class='"+className+"'>"+str+"</li>");
			if(log.children("li").length > 8) {
				log.get(0).removeChild(log.children("li")[0]);
			}
		}
		function getTime() {
			var now= new Date(),
			h=now.getHours(),
			m=now.getMinutes(),
			s=now.getSeconds(),
			ms=now.getMilliseconds();
			return (h+":"+m+":"+s+ " " +ms);
		}
		
		function beforeEditName(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			setTimeout(function() {
				if (confirm("进入节点 '" + treeNode.name + "'编辑状态?")) {
					setTimeout(function() {
						zTree.editName(treeNode);
					}, 0);
				}
			}, 0);
			return false;
		}
		function beforeRemove(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			return confirm("确认删除'" + treeNode.name + "'节点吗?");
		}
		function beforeRename(treeId, treeNode, newName, isCancel) {
			className = (className === "dark" ? "":"dark");
			showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>":""));
			if (newName.length == 0) {
				setTimeout(function() {
					var zTree = $.fn.zTree.getZTreeObj("treeDemo");
					zTree.cancelEditName();
					alert("Node name can not be empty.");
				}, 0);
				return false;
			}
			return true;
		}
		// 树的单击事件         
		    function zTreeOnClickRight(event, treeId, treeNode) {
		        var treeid = treeNode.id;
		        $("#hidId").val(treeid);
		
		        $("#ifm").attr("src", "FileView?NodeId=" + treeid);
		    }
		
		    function treeShow(data) {
		        zTreeObj = $.fn.zTree.init($("#test"), setting, data);
		        zTreeObj.expandAll(true);
		    }
	
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			new MtrSearchZTree();
		});
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo2"), setting2, zNodes);
			new MtrSearchZTree();
		});
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo3"), setting2, zNodes);
			new MtrSearchZTree();
		});
		function myOnDblClick(event, treeId, treeNode) {
			//第二步            
			 $(".sjbm").val(treeNode.name);
		     $("#search-tree").hide();       
		}
	 //主动加载jquery模块
	layui.use(['jquery', 'layer','laydate'], function(){
		var $ = layui.jquery //重点处
		,layer = layui.layer
		,laydate = layui.laydate;
		
		laydate.render({
			elem: '#date',
			trigger: 'click' ,//采用click弹出
			range: true
	  });
		//得到父页面的值
		var index = (window.parent.index_);
		var id = (window.parent.id_);
		console.log(id);
		layui.use('form', function(){  
		 	var form = layui.form;
		 	//------表单提交-------
			form.on('submit(confirmBtn)', function (data) {
			    var obj = data.field;
			    console.log(obj);
			    //以下是ajax
			    
			    /*添加成功之后，关闭弹窗，刷新父页面*/
			    parent.layer.close(index);//关闭layer
			    $('#iframe',parent.document).attr('src', 'html/sys-mgt/sysLegal-mgt/sysLegal-mgt.html');
			});
			//取消
			$("body").on("click","#canleBtn",function(){
				parent.layer.close(index);//关闭layer
			})
			//点击搜索上级部门
			$("#search-btn").click(function(){
				$("#search-tree").slideToggle();//打开、关闭上级部门的树
			})
			//点击搜索角色列表
			$("#search2-btn").click(function(){
				$("#search2-tree").slideToggle();//打开、关闭所属部门的树
			})
			
		})	
	})
   
</script>
</html>